<template>
    <div>
     <div class="ttop"> <van-nav-bar title="下单" left-text="返回" left-arrow  @click-left="onClickLeft"/></div>
    <div class="main">
        <div class="address">
           <div class="img"></div>
           <!-- 地址 -->
           <div class="list" v-for="item in list" :key="item.id">
            <div class="name">{{item.name}}</div>
            <div class="info">
          <p>{{item.mobile}}</p>
          <p>{{item.address}} {{item.address_detail}}</p>
        </div>
        </div>
        <!-- 产品详情 -->
        <div class="good" v-for="item in list" :key="item.id">
        <van-swipe-cell>
          <van-card
            :num="item.number"
            :price="item.retail_price"
            :title="item.goods_name"
            class="goods-card"
            :thumb="item.list_pic_url"
          />
        </van-swipe-cell>
        </div>
    </div>
    </div>
    <div class="bottom">
        <div class="left">实付:</div>
        <div class="right">支付</div>
    </div>
    </div>  
</template>

<script>
// order/detailAction
import {submitAction} from "@/api/car/submit.js";
import { getListAction } from "@/api/my/address.js";
    export default {
        data(){
            return{
                list:[]
            }
        },
        methods:{
            onClickLeft(){
                this.$router.go(-1)
            }
        },
        created(){
         var openId = localStorage.getItem("openId");
            submitAction({

            openId: openId,
            allPrise:1234,
            goodsId:1116005
            
            }).then((res) => {
            this.list= res.data;
            });

               getListAction({
                openId: openId,
                }).then((res) => {
                this.list= res.data;
                });
        },
        }
    
</script>

<style lang="scss" scoped>
.ttop{
    position: fixed;
    width:100%;
    top: 0;
    left: 0;
    z-index: 666;
    height: 46px;
}
.main{
    padding-top: 46px;
    width: 100%;
    .address{
        height: 106px;
        .img{
            width: 375px;
            height: 10px;
            background: url('../../../assets/list.png') repeat ;
            
         .list {
        border: 2px solid  #f4f4f4;
        width: 96%;
        // height: 100px;
        height: 66px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .info{
            width: 50%;
            text-align: left;
            p:nth-child(1){
            font-size: 12px;
            }
            p:nth-child(2){
            font-size: 12px;
            color: #666;
            }
        }
         }
        }
    }
}
.bottom{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    .left{
        font-size: 13px;
        width: 275px;
        background-color: #fff;
        height: 50px;
        line-height: 1.33333rem;
    }
    .right{
        font-size: 16px;
        width: 100px;
        height: 1.33333rem;
        line-height:1.33333rem;
        background-color: #b4282d;
        color: #fff;
    }
}

</style>